<template>
  <div class="word-app" :data-theme="theme">
    <DetailedWord :key="111" :word="currentWord.word" :show="DetailedWordShow" />
    <!-- 顶部导航 -->
    <header class="app-header">
      <div class="header-content">
        <h1 class="app-title">词汇记忆卡</h1>
        <div class="progress-indicator">
          <div class="progress-bar" :style="{ width: progressPercentage + '%' }"></div>
          <span class="progress-text">{{ currentIndex + 1 }} / {{ words.length }}</span>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="app-main">
      <template v-if="!showCompletion">
        <!-- 单词卡片 -->
        <div class="word-card" :class="{ 'is-flipped': isFlipped }" @click="flipCard">
          <div class="card-face front">
            <div class="word-container">
              <span class="word-label">单词</span>
              <h2 class="word-text">{{ currentWord.word }}</h2>
            </div>
            <div class="hint-text">点击卡片查看释义</div>
          </div>

          <div class="card-face back">
            <div class="definition-container">
              <span class="definition-label">释义</span>
              <p class="definition-text">{{ currentWord.definition }}</p>
            </div>
            <div class="example-container" v-if="currentWord.example">
              <span class="example-label">例句</span>
              <p class="example-text">{{ currentWord.example }}</p>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="btn know-btn" @click="markAsKnown" :disabled="!isFlipped">
            <span class="btn-icon">✓</span>
            <span class="btn-text">认识</span>
          </button>

          <button class="btn dont-know-btn" @click="markAsUnknown" :disabled="!isFlipped">
            <span class="btn-icon">✗</span>
            <span class="btn-text">不认识</span>
          </button>
        </div>
      </template>

      <!-- 完成学习后的选择界面 -->
      <div v-else class="completion-screen">
        <div class="completion-card">
          <h2 class="completion-title">🎉 学习完成!</h2>
          <p class="completion-stats">你已学习了 {{ words.length }} 个单词</p>

          <div class="completion-details">
            <div class="stat-item">
              <span class="stat-value correct">{{ stats.known }}</span>
              <span class="stat-label">已掌握</span>
            </div>
            <div class="stat-item">
              <span class="stat-value incorrect">{{ stats.unknown }}</span>
              <span class="stat-label">需复习</span>
            </div>
          </div>

          <div class="completion-actions">
            <button class="btn study-again-btn" @click="studyAgain">
              <span class="btn-icon">🔄</span>
              <span class="btn-text">再学一组</span>
            </button>
            <button class="btn return-home-btn" @click="returnHome">
              <span class="btn-icon">🏠</span>
              <span class="btn-text">返回主页</span>
            </button>
          </div>
        </div>
      </div>

    </main>

    <!-- 底部统计 -->
    <footer class="app-footer">
      <div class="stats-container">
        <div class="stat-item known-stat">
          <div class="stat-value">{{ stats.known }}</div>
          <div class="stat-label">已掌握</div>
        </div>
        <div class="stat-item unknown-stat">
          <div class="stat-value">{{ stats.unknown }}</div>
          <div class="stat-label">需复习</div>
        </div>
      </div>
    </footer>

    <!-- 主题切换按钮 -->
    <button class="theme-toggle" @click="toggleTheme">
      <span class="theme-icon">{{ theme === 'light' ? '🌙' : '☀️' }}</span>
    </button>
  </div>
</template>

<script setup>
import { ref, computed, inject, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import DetailedWord from './detailedWord.vue';

const router = useRouter();
// 主题管理
const theme = inject('theme');
// const setTheme = inject('setTheme');
const toggleTheme = () => {
  if (theme.value === 'light') {
    theme.value = 'dark';
  } else {
    theme.value = 'light';
  }
  // theme.value === 'dark' ? 'light' : 'dark'
  console.log(theme.value);
};

// 单词数据
const words = ref([
  { word: "Ephemeral", definition: "短暂的，瞬息的", example: "Beauty is ephemeral, but memories last forever." },
  { word: "Serendipity", definition: "意外发现珍奇事物的才能", example: "Their meeting was a wonderful serendipity." },
  { word: "Quintessential", definition: "精髓的，典型的", example: "This painting is the quintessential example of Impressionism." },
  { word: "Melancholy", definition: "忧郁，愁思", example: "There's a melancholy tone in his late works." },
  { word: "Luminous", definition: "发光的，明亮的", example: "The moon was luminous in the night sky." },
  { word: "Resilience", definition: "恢复力，适应力", example: "Her resilience in the face of adversity was admirable." },
  { word: "Euphoria", definition: "极度愉快的感觉", example: "Winning the championship filled them with euphoria." }
]);

// 应用状态
const currentIndex = ref(0);
const isFlipped = ref(false);
const stats = ref({ known: 0, unknown: 0 });
const DetailedWordShow = ref(false);
// 计算属性
const currentWord = computed(() => words.value[currentIndex.value]);
const progressPercentage = computed(() => ((currentIndex.value + 1) / words.value.length) * 100);
const showCompletion = ref(false);
// 方法
const flipCard = () => {
  isFlipped.value = !isFlipped.value;
};

const markAsKnown = () => {
  console.log("1");
  stats.value.known++;
  nextWord();
  // openDrawer()
};

const markAsUnknown = () => {
  console.log("2");
  stats.value.unknown++;
  // nextWord();
  openDrawer()
};


// 单词抽屉
// const selectedWord = ref("");
// const showDrawer = ref(false);

const openDrawer = async () => {
  if (DetailedWordShow.value) {
    DetailedWordShow.value = false;
    await nextTick();
  }
  // selectedWord.value = word;
  setTimeout(() => {
    DetailedWordShow.value = true;
  }, 10);
};


const nextWord = () => {
  isFlipped.value = false;

  // 添加卡片切换动画
  setTimeout(() => {
    if (currentIndex.value < words.value.length - 1) {
      currentIndex.value++;
    } else {
      currentIndex.value = 0;
      // 可以添加完成提示
      showCompletion.value = true;
    }
  }, 200);
};



// 再学一组
const studyAgain = () => {
  currentIndex.value = 0;
  isFlipped.value = false;
  showCompletion.value = false;
  // 可以在这里重置统计或打乱单词顺序
};

// 返回主页
const returnHome = () => {
  // 实际项目中可能是 router.push('/')
  // alert('返回主页');
  router.push('/Home')
  // 可以添加返回主页的逻辑
};
</script>

<style scoped>
.word-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

/* 主题变量 */
[data-theme="light"] {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-header: #4a6bff;
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
  --text-header: #ffffff;
  --border-color: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --correct-color: #4caf50;
  --wrong-color: #f44336;
  --progress-bg: rgba(255, 255, 255, 0.3);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-header: #5d7dff;
  --text-primary: #e5e5e5;
  --text-secondary: #a0a0a0;
  --text-header: #ffffff;
  --border-color: #434343;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --correct-color: #4caf50;
  --wrong-color: #f44336;
  --progress-bg: rgba(0, 0, 0, 0.3);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 头部样式 */
.app-header {
  background-color: var(--bg-header);
  color: var(--text-header);
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.progress-indicator {
  position: relative;
  width: 100px;
  height: 24px;
  background-color: var(--progress-bg);
  border-radius: 12px;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--text-header);
  transition: width 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 500;
}

/* 主内容区 */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* 单词卡片样式 */
.word-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 280px;
  perspective: 1000px;
  margin-bottom: 2rem;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.word-card.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  /* padding: 2rem; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-secondary);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
}

.front {
  align-items: center;
  justify-content: center;
}

.back {
  transform: rotateY(180deg);
}

.word-container,
.definition-container,
.example-container {
  width: 80%;
  margin-left: 10%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.word-label,
.definition-label,
.example-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

.word-text {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.2;
}

.definition-text {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
}

.example-text {
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

.hint-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 1.5rem;
}

/* 操作按钮 */
.action-buttons {
  margin-top: 5%;
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}

.btn {
  flex: 1;
  padding: 1rem;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.know-btn {
  background-color: var(--correct-color);
  color: white;
}

.dont-know-btn {
  background-color: var(--wrong-color);
  color: white;
}

.btn-icon {
  font-size: 1.2rem;
}

/* 底部统计 */
.app-footer {
  padding: 1.5rem 1rem;
  background-color: var(--bg-secondary);
  box-shadow: 0 -2px 8px var(--shadow-color);
}

.stats-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.stat-item {
  text-align: center;
  min-width: 80px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.known-stat .stat-value {
  color: var(--correct-color);
}

.unknown-stat .stat-value {
  color: var(--wrong-color);
}

/* 主题切换按钮 */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-header);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--shadow-color);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-icon {
  font-size: 1.5rem;
}

/* 完成学习界面 */
.completion-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.completion-card {
  background-color: var(--bg-secondary);
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
}

.completion-title {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.completion-stats {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.completion-details {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.completion-details .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.completion-details .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.completion-details .stat-value.correct {
  color: var(--correct-color);
}

.completion-details .stat-value.incorrect {
  color: var(--wrong-color);
}

.completion-details .stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.completion-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.study-again-btn {
  background-color: var(--correct-color);
  color: white;
}

.return-home-btn {
  background-color: var(--bg-header);
  color: white;
}







/* 响应式设计 */
@media (max-width: 480px) {
  .word-card {
    height: 240px;
  }

  .word-text {
    font-size: 1.75rem;
  }

  .definition-text {
    font-size: 1.1rem;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style>